import React, {useEffect, useState,} from 'react';
import {PageContainer} from "@ant-design/pro-layout";
import {message, Tabs,Button} from "antd";
import {headerapi, system_modification, system_settings} from "@/services/ant-design-pro/management";
import ProForm, {
  ProFormRadio,
  ProFormText,
  ProFormTextArea,
  ProFormUploadButton
} from '@ant-design/pro-form';
const {TabPane} = Tabs;
export default () => {
  const [tabKey, setTabKey] = useState(1)
  const [titleList, setTitleList] = useState([])
  const [systemList, setSystemList] = useState([])
  const [childrenIndex, setChildrenIndex] = useState(0)
  useEffect(() => {
//请求头部api
    headerapi().then((res) => {
      setTitleList(res.map((item) => {
        return {tab: item.nickname, key: item.id, content_title: item.children, category_name: item.name}
      }))
    })
//请求列表api
    system_settings().then((res) => {
      setSystemList(res.data)
    })
  }, [])
  const [formLayout] = useState('horizontal');
  const formItemLayout =
    formLayout === 'horizontal'
      ? {
        labelCol: { span: 6 },
        wrapperCol: { span: 12 },
      }
      : null;
  return (
    <div style={ {background: '#F5F7FA'} }>
      <PageContainer
        fixedHeader
          onTabChange={(key) => {
          setchildrenIndex(0)
          titleList.forEach((item, index) => {
            if (key == item.key) {
              setTabKey(item.key)
              return
            }
          })
        }}
        header={ {
          title: titleList.filter(i => i.key === tabKey)[0]?.content_title[childrenIndex].nickname,
          breadcrumb: {},
        } }
        tabList={titleList}
      >
        <div>
          {/*内容*/}
          <Tabs
            style={ {background: 'white', padding: '15px'} }
            tabBarGutter={6} defaultActiveKey="1" type="card"
            onTabClick={(key) => {
              titleList.filter(i => i.key === tabKey)[0]?.content_title.map((item, index) => {
                if (key == item.id) {
                  setChildrenIndex(index)
                }
              })
            }}
          >
          {
            titleList.filter(i => i.key === tabKey)[0]?.content_title.map((item, index) => {
              let current = titleList.filter(i => i.key === tabKey)[0].content_title[childrenIndex]
              return (
                <TabPane tab={item.nickname} key={item.id}>
                    <ProForm
                      {...formItemLayout}
                      layout={formLayout}
                      onFinish={(values) => {
                        //请求修改
                        system_modification({...values, category_name: current.name})
                        message.success('修改成功')
                      }}
                      submitter={ {
                        // 配置按钮文本
                        searchConfig: {
                          submitText: '提交',
                        },
                        // 配置按钮的属性
                        resetButtonProps: {
                          style: {
                            // 隐藏重置按钮
                            display: 'none',
                          },
                        },
                        submitButtonProps: {},
                        // 完全自定义整个区域
                        render: (props) => {return <Button type="primary" style={ {width:'240px',height:'35px',marginLeft:'340px'} } key="submit" onClick={() => props.form?.submit?.()}>提交</Button>},
                      } }
                    >
                      {
                        systemList.map(i => {
                          if (i.category_name === current.name) {
                            switch (i.type) {
                              case "radio": {
                                return <>
                                  <ProFormRadio.Group layout="inline" name={i.menu_name} label={i.info} tooltip={i.desc} options={i.parameter} initialValue={i.value}/>
                                </>
                              }
                                break
                              case "text": {
                                return <>
                                  <ProFormText width={i.width + '%'} name={i.menu_name} label={i.info} tooltip={i.desc} initialValue={i.value}/>
                                </>
                              }
                                break
                              case "textarea": {
                                return <>
                                  <ProFormTextArea name={i.menu_name} label={i.info} width={i.width + '%'} tooltip={i.desc} placeholder={i.value} fieldProps={i.value}/>
                                </>
                              }
                                break
                              case "upload": {
                                return <>
                                  <ProFormUploadButton name={i.menu_name} label={i.info} tooltip={i.desc} fieldProps={ {listType: 'picture-card'} } max={1} action="/upload.do"/>
                                </>
                              }
                                break
                            }
                          }
                        })
                      }
                    </ProForm>
                </TabPane>
              )
            })
          }
          </Tabs>
        </div>
      </PageContainer>



    </div>
  );
}


